<template>
  <div id="app">
    <div v-if="isLoggedIn">欢迎，已登录管理用户</div>
    <el-button @click="goToLogin" v-else>前往登录页面</el-button>
    <el-button @click="showAddDialog">新增用户</el-button>
    <el-table :data="userList" border style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column lable="操作">
        <template #default="scope">
          <el-button @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger"@click="showDeleteDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <!--新增用户对话框-->
    <el-dialog title="新增用户" :visible.syn="addDialogVisible" width="30%">
      <el-form :model="newUser">
        <el-form-item label="姓名">
          <el-input v-model="newUser.name"></el-input>
          </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="newUser.age"></el-input>
          </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="newUser.address"></el-input>
        </el-form-item>
        </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="addUser">确定</el-button>
        </span>
        </template>
      </el-dialog>
    <!--编辑用户对话框-->
    <el-dialog title="编辑用户" ：visible.sync="editDialogVisible" width="30%">
      <el-form :model="editUser">
        <el-form-item label="姓名">
          <el-input v-model="editUser.name"></el-input>
          </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editUser.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editUser.address"></el-input>
        </el-form-item>
        </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="editUserInfo">确定</el-button>
        </span>
        </template>
      </el-dialog>
    <!--删除用户确认对话框-->
    <el-dialog title="提示" ：visible.sync="deleteDialogVisible" width="30%">
      <span>确定要删除该用户吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVoisible=false">取消</el-button>
          <el-button type="primary" @click="deletUser(deletUserId)">确定</el-button>
          </span>
        </template>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      userList: [
        {name: "张三", age: "1", address: "北京"},
        {name: "李四", age: "2", address: "北京"},
        {name: "王五", age: "3", address: "北京"},
      ],
      addDialogVisible: false,
      newUser: {name: "", age: "", address: ""},
      editDialogVisible: false,
      editUser: {name: "", age: "", address: ""},
      deleteDialogVisible: false,
      deleteUserId: null,
    };
  },
  methods: {
    goToLogin() {
      console.log("前往登录页面");
    },
    showEditDialog(row) {
      this.addDialogVisible = true;
    },
    addUser() {
      this.userList.push(this.newUser);
      this.addDialogVisible = false;
      this.newUser = {name: "", age: "", address: ""};
    },
    showDeleteDialog(row) {
      this.editUser = {...row};
      this.editDialogVisible = true;
    },
    editUserInfo() {
      const index = this.userList.findIndex(user => user.name === this.newUser.name);
      if (index !== -1) {
        this.userList.splice = (index, 1, this.editUser);
      }
      this.editDialogVisible = false;
    },
    showDeleteDialog(row) {
      this.deleteUserId = row.name;
      this.deleteDialogVisible = true;
    },
    deleteUser(userId) {
      this.userList =
          this.userList.filter(user => user.name === userId);
      this.deleteDialogVisible = false;
    }
  }
};
</script>
<style scoped>

</style>